jQuery(document).ready(
		function() {
			$('.map').click(
					function() {
						$('#showData').empty();
						$('#showBar').empty();
						var location = new google.maps.LatLng(31.195476,121.54753);
						// load google map
						var mapOptions = {
							center : location,
							zoom : 10,
							mapTypeId : google.maps.MapTypeId.ROADMAP,
							mapTypeControl: true
						};
						var map = new google.maps.Map(document
								.getElementById("showData"),
								mapOptions);

						//you can find lots of icons in http://mapicons.nicolasmollet.com
						var icon = new google.maps.MarkerImage(
								'../images/taxi.png',
								new google.maps.Size(48, 48)
								);
						var marker = new google.maps.Marker({
							position : location,
							title : "Hello World!",
							map:map,
							icon:icon
						});
//						// To add the marker to the map, call setMap();
//						
					});
		});

$(document).ready(
		function() {
			$(".sub2").click(function() {
////				var param = new Object();
////				param.kind = 'c';
////				param.cus_id = '520da03e4036edec19000001';
////
////				var result = $.ajax({
////					url : '/personalinfo',
////					type : "post",
////					dataType : "json",
////					contentType : "application/json",
////					data : JSON.stringify(param),
////					success : function(data) {
////						alert(JSON.stringify(data));
////					},
////					error : function(data) {
////						alert(JSON.stringify(data));
////					}
////				});
//				if (navigator.geolocation) {
//					navigator.geolocation.getCurrentPosition(getPostion,error);
//				}else{
//					alert('false');
//				}
//				function getPostion(location){
//
//					var location = new google.maps.LatLng(location.coords.latitude,location.coords.longitude);
//					// load google map
//					var mapOptions = {
//						center : location,
//						zoom : 15,
//						mapTypeId : google.maps.MapTypeId.ROADMAP,
//						mapTypeControl: true
//					};
//					var map = new google.maps.Map(document
//							.getElementById("management_viewBody"),
//							mapOptions);
//					var marker = new google.maps.Marker({
//						position : location,
//						title : "Hello World!",
//						map:map,
//					});
//
//				}


				$('#showData').empty();
				
				if($('#selector.selector').length==0){
					var selector = $('<select></select>').attr('id', 'selector').attr('class','selector');
					$('.showBar').append(selector);
					
					var options = ['driver', 'customer', 'order'];

					for ( var index in options){
						var option = $('<option></option>').text(options[index]).val(index);	
						$('.selector').append(option);
					}
					$(".selector").get(0).selectedIndex=-1;
				}
				
				$(".selector").change(function(){
					//alert($(".selector").find("option:selected").text());
//					var result = $.ajax({
//						url : '/personalinfo',
//						type : "post",
//						dataType : "json",
//						contentType : "application/json",
//						data : JSON.stringify(param),
//						success : function(data) {
//							alert(JSON.stringify(data));
//							//add the pie function!!!
//						},
//						error : function(data) {
//							alert(JSON.stringify(data));
//						}
//					});
					
					showPie('showData', 320, 240, 100, [55, 20, 13, 22, 5, 1, 2, 20], { stroke : "red", legend: ["%%.%% - Enterprise Users", "IE Users", "%%"], legendpos: "south"});
				});
				
			
			});
		});	


$(function() {
	$(".sub3").click(function() {
		$('#showData').empty();
		$('#showBar').empty();
		var table = $('<table></table>').attr('id', 'table');
		$('#showData').append(table);
				
		//@see http://datatables.net/release-datatables/examples/ajax/objects.html
		var oTable = $('#table').dataTable({
			//must be false if you want to deal with data in client side
			//If the data is thousands or millions rows, pls set the bServerSide value to 'true',
			//you can see the detail at http://datatables.net/usage/server-side
			"bServerSide" : false,
			"aaSorting" : [],
			"bProcessing" : true,
			"sAjaxSource" : "/getDataTable",
			"aoColumns" : [ {
				"mData" : "name"
			}, {
				"mData" : "taxi_number"
			}, {
				"mData" : "phone"
			}, {
				"mData" : "credit"
			}, {
				"mData" : "photo"
			}, {
				"mData" : "latitude"
			}, {
				"mData" : "longitude"
			} ]
		});
		
		//@see http://datatables.net/examples/api/select_single_row.html
		$("#table tbody").click(function(event){
			$(oTable.fnSettings().aoData).each(function (){
				$(this.nTr).removeClass('row_selected');
			});
			$(event.target.parentNode).addClass('row_selected');
//			$(event.target).html():by this you can get the data in row
			//alert(($(event.target.parentNode).html()));
//			alert(fnGetSelected(oTable)[0].innerHTML);
//			alert(fnGetSelected(oTable)[0].children.item(4).innerHTML);
//			alert(fnGetSelected(oTable)[0]);
			// BY fnGetSelected(oTable)[0].children.item(4).innerHTML we can get the detail in the select row 
			// and show more detail about the user by pie or others.
			
		});
		
		
		function fnGetSelected( oTableLocal )
		{
			var aReturn = new Array();
			var aTrs = oTableLocal.fnGetNodes();
			
			for ( var i=0 ; i<aTrs.length ; i++ )
			{
				if ( $(aTrs[i]).hasClass('row_selected') )
				{
					aReturn.push( aTrs[i] );
				}
			}
			return aReturn;
		}
	});
});


//$(function(){
//	$('.map').trigger('click');
//});


function showPie(id, cx, cy, r, values, opts){

	//"showData"
	 var r = Raphael(id);
//	 > Parameters
//	 **
//	 - cx (number) x coordinate of the chart
//	 - cy (number) y coordinate of the chart
//	 - r (integer) radius of the chart
//	 - values (array) values used to plot
//	 - opts (object) options for the chart
//	 o {
//	 o minPercent (number) minimal percent threshold which will have a slice rendered. Sliced corresponding to data points below this threshold will be collapsed into 1 additional slice. [default `1`]
//	 o maxSlices (number) a threshold for how many slices should be rendered before collapsing all remaining slices into 1 additional slice (to focus on most important data points). [default `100`]
//	 o stroke (string) color of the circle stroke in HTML color format [default `"#FFF"`]
//	 o strokewidth (integer) width of the chart stroke [default `1`]
//	 o init (boolean) whether or not to show animation when the chart is ready [default `false`]
//	 o colors (array) colors be used to plot the chart
//	 o href (array) urls to to set up clicks on chart slices
//	 o legend (array) array containing strings that will be used in a legend. Other label options work if legend is defined.
//	 o legendcolor (string) color of text in legend [default `"#000"`]
//	 o legendothers (string) text that will be used in legend to describe options that are collapsed into 1 slice, because they are too small to render [default `"Others"`]
//	 o legendmark (string) symbol used as a bullet point in legend that has the same colour as the chart slice [default `"circle"`]
//	 o legendpos (string) position of the legend on the chart [default `"east"`]. Other options are `"north"`, `"south"`, `"west"`
	
	 pie = r.piechart(320, 240, 100, [55, 20, 13, 22, 5, 1, 2, 20], { stroke : "red", legend: ["%%.%% - Enterprise Users", "IE Users", "%%"], legendpos: "south"});
	
//	 pie = r.piechart(new Number(cx), new Number(cy), r, values, opts);


       r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
       pie.hover(function () {
           this.sector.stop();
           this.sector.scale(1.1, 1.1, this.cx, this.cy);

           if (this.label) {
               this.label[0].stop();
               this.label[0].attr({ r: 7.5 });
               this.label[1].attr({ "font-weight": 800 });
           }
       }, function () {
           this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

           if (this.label) {
               this.label[0].animate({ r: 5 }, 500, "bounce");
               this.label[1].attr({ "font-weight": 400 });
           }
       });
	
	
}

function loadMap(){
	
}

